<template>
  <a-drawer
    title="下载记录"
    placement="right"
    maskClosable
    width="500"
    :visible="drawerVisible"
    @close="$store.commit('setDrawerVisible', false)"
  >
    <a-table 
      :columns="columns" 
      :data-source="tableData"
      :pagination="pagination"
      @change="handleTableChange"
    > 
    <!-- slot-scope="text, record" -->
      <span slot="action"  slot-scope="text, record" style="width: 80px;">
        <a class="view" @click="view(text, record)">查看</a>
      </span>
    </a-table>
  </a-drawer>
</template>
<script>
import { createNamespacedHelpers, mapState} from "vuex";
let { mapMutations, mapActions } = createNamespacedHelpers("adminBasic");


export default {
  name: 'DownloadDrawer',
  data() {
    return {
      
      columns: [
        {
          title: '教学设计',
          dataIndex: 'name',
          key: 'name',
          align: "center",
        },
        {
          title: '年级',
          dataIndex: 'age',
          key: 'age',
          align: "center",
        },
        {
          title: '下载时间',
          dataIndex: 'address',
          key: 'address',
          align: "center",
        },
        {
          title: '操作',
          key: 'action',
          align: "center",
          width: 100,
          scopedSlots: { customRender: 'action' },
        },
        
      ],
      tableData: [
        {
          key: '1',
          name: '《狼牙山五壮士》教学设计...',
          age: '2024.04.09',
          address: '2024.04.09',
        },
        {
          key: '2',
          name: '《狼牙山五壮士》教学设计...',
          age: '2024.04.09',
          address: '2024.04.09',
        },
        {
          key: '3',
          name: '《狼牙山五壮士》教学设计...',
          age: '2024.04.09',
          address: '2024.04.09',
        },
        {
          key: '11',
          name: '《狼牙山五壮士》教学设计...',
          age: '2024.04.09',
          address: '2024.04.09',
        },
        {
          key: '21',
          name: '《狼牙山五壮士》教学设计...',
          age: '2024.04.09',
          address: '2024.04.09',
        },
        {
          key: '31',
          name: '《狼牙山五壮士》教学设计...',
          age: '2024.04.09',
          address: '2024.04.09',
        },
      ],
      
      pagination: {
        current: 1,
        pageSize: 10,
      },


    }
  },

  created() {
  },

  computed: {
    drawerVisible() {
      return this.$store.state.drawerVisible
    }
  },  

  

  methods: {
    ...mapActions(["formGet","post"]),

    view(text, record){
      console.log(text, record)
    },

    handleTableChange(pagination, filters, sorter) {
      // console.log(pagination)
      this.pagination.current = pagination.current
    },
    
  }
}
</script>


<style lang="less" scoped>
/deep/ .ant-pagination-item-active {
  border-color: rgba(154, 0, 0, 1);
  background: rgba(154, 0, 0, 1);
}

/deep/ .ant-pagination-item:hover {
  border-color: rgba(154, 0, 0, 1);
}
/deep/ .ant-pagination-item:hover a {
  color: rgba(154, 0, 0, 1);
}
/deep/ .ant-pagination-item-active a {
  color: #fff;
}
/deep/ .ant-pagination-item-active:hover a {
  color: #fff;
}
</style>